<template>
	<view class="list">
		<view class="item" v-for="(item,index) in list" :key="index"
			@click="go(`/pages/index/sourceMaterial/sourceMaterialDetails?id=${item.id}`)">
			<view class="name-wrap s-flex-r-s-s">
				<image class="avatar" :src="$IMG_URL+item.image" mode=""></image>
				<view class="r flex1">
					<view class="name">
						{{item.name}}
					</view>
					<view class="title">
						{{item.title}}
					</view>
					<!-- <view class="content" v-html="item.content"></view> -->
					<view class="imgs s-flex-r-s-s u-flex-wrap">
						<view class="img" @click.stop="playVideo(item)" v-if="item.video_img&&item.video">
							<image class="video-img" :src="$IMG_URL+item.video_img" mode=""></image>
							<view class="cover-btn s-flex-c-c-c">
								<u-icon name="play-right-fill" size="50" color="#ffffff"></u-icon>
							</view>
						</view>
						<image class="img" @click.stop="prev(i,item.images)" :src="$IMG_URL+m" mode=""
							v-for="(m,i) in item.images" :key="m"></image>
					</view>
					<view class="time-wrap s-flex-r-b-c" style="padding-top: 20rpx;">
						<text class="time">{{item.createtime}}</text>
						<image @click.stop="shareImg(item)" class="icon" src="/static/images/memberCard/share.png"
							mode=""></image>
					</view>
				</view>
			</view>

		</view>
		<u-popup v-model="show" mode="bottom" border-radius="14" :closeOnClickOverlay="false">
			<view class="box">
				<view class="title">
					分享
				</view>
				<u-icon @click="show=false" class="close" color="#999999" name="close"></u-icon>
				<view class="shareBox s-flex-r-c-c">
					<view class="shareDiv">
						<button class="btn s-flex-c-s-c" open-type="share">
							<image class="img" src="/static/images/indexnew/wx.png" />
							<text>分享给好友</text>
						</button>
					</view>
					<!-- 				<view class="shareDiv">
						<button class="btn s-flex-c-s-c" open-type="share">
							<image class="img" src="/static/images/indexnew/wx-circle.png" />
							<text>分享到朋友圈</text>
						</button>
					</view> -->
				</view>
			</view>
		</u-popup>
		<u-popup v-model="show1" mode="bottom" height="100%" @close="closeVideo" :closeable="true" :mask="true"
			:mask-close-able="true" :closeOnClickOverlay="false">
			<view class="my-video-wrap s-flex-c-c-c">
				<!-- https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4 -->
				<video ref="myVideo" class="my-video" :poster="$IMG_URL+current.video_img" :src="$IMG_URL+current.video"
					controls></video>
				<button @click="download($IMG_URL+current.video)">视频下载</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				show1: false,
				videoContext: null,
				current: {},
				list: []
			};
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		onLoad() {
			this.getList()
		},
		// 分享到微信好友
		onShareAppMessage() {
			return {
				title: '贯宠',
				path: '/pages/index/sourceMaterial/sourceMaterial'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '贯宠',
				path: '/pages/index/sourceMaterial/sourceMaterial'
			}
		},
		methods: {
			// downLoad(url) {
			// 	console.log('url: ', url)
			// 	uni.saveVideoToPhotosAlbum({
			// 		filePath: url,
			// 		success: function() {
			// 			console.log('save success');
			// 		}
			// 	});
			// },
			// 下载
			async download(fileurl) {
				let that = this
			    await uni.showLoading({
					title: '下载中'
				})
				let filePath = wx.env.USER_DATA_PATH + '/' + new Date().getTime() +'.mp4'
				//将远程文件下载到小程序内存中
				uni.downloadFile({
					url: fileurl,//临时路径
					filePath: filePath,//指定路径，去文件管理的微信中查看
					success(res) {
					   // 2 成功下载后而且状态码为200时将视频保存到本地系统
					   if (res.statusCode === 200) {
						  uni.saveVideoToPhotosAlbum({
						  // filePath: res.tempFilePath,
						  filePath: filePath,
						  success(res) {
							 console.log(res, 'success')
						  },
						  fail(error) {
							 console.log(error, 'error')
						  }
					   })
					   uni.hideLoading();
					   // 提示用户下载成功
					   uni.showToast({
						  title: "下载成功",
						  icon: "success"
					   });
				     }
					 // 如果该资源不可下载或文件格式出错则提示用户
					 else {
						uni.showToast({
							title: "资源格式错误，请联系管理员"
						});
					 }
					},
					fail: (err) => {
						// 下载失败提醒
						uni.hideLoading();
						uni.showToast({
							title: "下载失败"
						})
					}
				})
								
			},
			prev(i, urls) {
				uni.previewImage({
					current: i,
					urls: urls.map(i => (this.$IMG_URL + i))
				})
			},
			getList() {
				this.$http('user.getMaterial', {}).then(res => {
					this.list = res.data.data.map(i => {
						if (i.images) {
							i.images = i.images.split(',')
						}
						return i
					})
					console.log('this.list: ', this.list)
				});
			},
			//预览图片
			previewImg(imgUrl) {
				uni.previewImage({
					urls: [imgUrl]
				})
			},

			//分享按钮
			shareImg(item) {
				this.current = item
				this.show = true;
			},
			playVideo(item) {
				this.current = item
				this.show1 = true;
				this.videoContext.play();
			},
			closeVideo(item) {
				this.videoContext.stop();
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin-bottom: 20rpx;
	}

	.my-video-wrap {
		width: 100%;
		height: 100%;
	}

	.my-video {
		width: 750rpx;
		margin-bottom: 10rpx;
	}

	.s-flex-wrap {
		flex-wrap: wrap;
	}

	.s-flex-r-s-s {
		display: flex;
	}

	.s-flex-r-s-c {
		display: flex;
		align-items: center;
	}

	.s-flex-r-e-c {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.s-flex-r-c-c {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s-flex-r-b-c {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.s-flex-r-b-s {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	.s-flex-r-b-e {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.s-flex-c-s-s {
		display: flex;
		flex-direction: column;
	}

	.s-flex-c-s-c {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}

	.s-flex-c-b-s {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.s-flex-c-c-c {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.s-flex-c-s-e {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-end;
	}

	.s-flex-c-e-c {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}

	.flex1 {
		flex: 1;
	}

	.box {
		position: relative;

		.close {
			position: absolute;
			top: 42rpx;
			right: 32rpx;
		}

		.title {
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 108rpx;
			margin-bottom: 20rpx;
		}
	}

	.shareBox {
		padding: 30rpx 96rpx;

		.shareDiv {
			display: inline-block;
			margin: 20rpx;
			font-size: 28rpx;
			color: #999999;
			text-align: center;

			.img {
				width: 108rpx;
				height: 108rpx;
				margin-bottom: 10rpx;
			}

			.btn {
				width: 100%;
				border: none !important;
				background: none !important;
				font-size: 28rpx !important;
				box-shadow: none !important;

				&:after {
					border: none;
				}
			}
		}
	}

	.list {
		padding: 20rpx 0;

		.item {
			width: 686rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			padding: 24rpx 30rpx;
			box-sizing: border-box;

			.name-wrap {
				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
					margin-right: 18rpx;
				}

				.name {
					font-weight: 500;
					font-size: 28rpx;
					color: #121072;
					line-height: 33rpx;
				}

				.title {
					padding: 18rpx 0;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 33rpx;
				}

				.content {
					// margin-bottom: 20rpx;
				}

				.imgs {
					.img {
						width: 172rpx;
						height: 172rpx;
						margin-right: 22rpx;
						margin-bottom: 22rpx;
						position: relative;

						&:nth-child(3n) {
							margin-right: 0rpx;
						}

						.video-img {
							width: 100%;
							height: 100%;
						}

						.cover-btn {
							width: 100%;
							height: 100%;
							position: absolute;
							top: 0;
							left: 0;
							background: rgba(0, 0, 0, 0.4);
						}
					}
				}

				.time-wrap {
					.time {
						font-size: 24rpx;
						color: #666666;
						line-height: 28rpx;
					}

					.icon {
						width: 28rpx;
						height: 28rpx;
					}
				}
			}
		}
	}
</style>